export default {
  name: 'HelloWorld',
  data() {
    return {
      timer: null,
      cutDownTimer: null,
      currentIndex: -1,
      timeDelay: 100,
      resultIndex: 6,
      showResult: false,
      isActive: false,
      giftList: [],
      isResult: false,
      resultObj: null,
      time: '00:00:00',
      isReady: false,
      integral: 0,
    };
  },
  methods: {
    async start() {
      if (!this.isReady) return;

      if (this.isActive) return;
      this.isActive = true;

      const res = await this.$http.get('/api/getReason');
      const index = Math.floor(Math.random() * 1.99);
      const gift = res.data.model;
      this.resultIndex = typeof gift.id === 'number' ? gift.id : index ? 7 : 5;
      this.isResult = gift.id === 0 ? true : !!gift.id;
      this.resultObj = gift;

      const count = 7;
      const startTime = new Date().getTime();
      const animate = () => {
        if (this.currentIndex === count) this.currentIndex = -1;
        this.currentIndex++;

        const currentTime = new Date().getTime();
        if (currentTime - startTime > 4000) {
          this.timeDelay = 200;
          clearInterval(this.timer);
          this.timer = null;
          this.timer = setInterval(animate, this.timeDelay);
        }

        if (currentTime - startTime > 5000) {
          this.timeDelay = 400;
          clearInterval(this.timer);
          this.timer = null;
          this.timer = setInterval(animate, this.timeDelay);
        }
        if (currentTime - startTime > 6000) {
          this.timeDelay = 600;
          clearInterval(this.timer);
          this.timer = null;
          this.timer = setInterval(animate, this.timeDelay);
        }
        if (currentTime - startTime > 7000) {
          this.timeDelay = 800;
          clearInterval(this.timer);
          this.timer = null;
          this.timer = setInterval(animate, this.timeDelay);
        }

        if (
          currentTime - startTime > 8000 &&
          this.currentIndex === this.resultIndex
        ) {
          this.timeDelay = 100;
          this.isActive = false;
          this.showResult = true;
          clearInterval(this.timer);
        }
      };
      this.timer = setInterval(animate, this.timeDelay);
      this.cutDownTimer = setInterval(() => {
        this.getTime();
      }, 1000);
    },
    getTime() {
      this.$http.get('/api/getTime').then(res => {
        const { displayTime, isReady } = res.data.model;
        this.time = displayTime;
        this.isReady = isReady;
        if (isReady) {
          clearInterval(this.cutDownTimer);
        }
      });
    },
    toResult() {
      clearInterval(this.timer);
      clearInterval(this.cutDownTimer);
      this.timer = null;
      this.cutDownTimer = null;
      this.$router.push('/about');
    },
  },
  created() {
    this.getTime();
    this.cutDownTimer = setInterval(() => {
      this.getTime();
    }, 1000);
    this.$http.get('/api/getGifts').then(res => {
      if (String(res.data.success) !== 'true') return;
      this.giftList = res.data.model.list;
    });
  },
  mounted() {
    // fetchJsonp('https://apis.map.qq.com/ws/location/v1/ip?callback=showLocation&key=QVIBZ-CVJCX-ERK4I-ZYRVL-QSC5Z-7BBWX&output=jsonp', (res) => {
    //     this.$http.get('/api/getLocation?result=' + JSON.stringify(res.result));
    // })
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.cutDownTimer);
  },
};
